<template>
	<div>
		<div class="tabs" :style="{ width: width + 'px' }">
			<div class="tabs-item" v-for="(tab, index) in tabList" :key="index" @click="change(index, tab.name, tab.page)">{{ tab.name }}</div>
			<div class="tabs-active" :style="{ left: left }">{{ title }}</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	let statusTab = ref(1);
	let emits = defineEmits(["changeTitle"]);
	// 组件传值
	const props = defineProps({
		width: {
			default: 369,
			type: Number
		},
		tabList: {
			default: [],
			type: Array
		},
		title: {
			default: "",
			type: String
		}
	});
	let left = ref(0);
	const change = (index, content, page) => {
		setTimeout(() => {
			emits("changeTitle", content);
		}, 200);
		left.value = index * 25 + "%";
	};
</script>
<style lang="scss" scoped>
	.title {
		height: 44px;
		background-color: #3c3c3c;
		color: #e9e7e7;
		text-align: center;
		font-size: 24px;
		line-height: 44px;
	}

	.page {
		/*calc()函数是css的计算属性，可以在小括号内进行基础的数值运算*/
		height: calc(100% - 60px - 40px);
	}

	.tabs {
		width: 369px;
		height: 44px;
		border-radius: 22px;
		line-height: 44px;
		background-color: #f7f7f9;
		text-align: center;
		position: relative;
	}

	.tabs-item {
		float: left;
		width: 25%;
		text-align: center;
	}

	.tabs-item:hover {
		cursor: pointer;
		opacity: 0.6;
	}

	.v-enter-active,
	.v-leave-active {
		transition: all 0.8s;
	}

	.v-enter-to,
	.v-leave {
		transform: translate(0);
	}

	.v-enter {
		transform: translateX(100%);
	}

	.tabs-active {
		position: absolute;
		width: 25%;
		border-radius: 22px;
		height: 38px;
		line-height: 38px;
		background-color: #000;
		color: #ffffff;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		transition: all 0.8s;
	}
</style>
